// 轮播图效果
let pageIndex = 0;
let pageList = document.querySelectorAll(".page li");
let itemList = document.querySelectorAll(".item li");
pageList.forEach((t, i) => {
  t.onclick = () => {
    pageList[pageIndex].style.backgroundColor = "rgb(94, 86, 104)";
    t.style.backgroundColor = "black";
    itemList[pageIndex].style.opacity = 0;
    itemList[i].style.opacity = 1;
    pageIndex = i;
  };
});
let rightBtn = document.querySelector(".rig");
let leftBtn = document.querySelector(".lef");

rightBtn.onclick = () => {
  let nextPage;
  if (pageIndex == 2) {
    nextPage = 0;
  } else {
    nextPage = pageIndex + 1;
  }
  itemList[pageIndex].style.opacity = 0;
  itemList[nextPage].style.opacity = 1;
  pageList[pageIndex].style.backgroundColor = "rgb(94, 86, 104)";
  pageList[nextPage].style.backgroundColor = "black";
  pageIndex = nextPage;
};
leftBtn.onclick = () => {
  let prevPage;
  if (pageIndex == 0) {
    prevPage = 2;
  } else {
    prevPage = pageIndex - 1;
  }
  itemList[pageIndex].style.opacity = 0;
  itemList[prevPage].style.opacity = 1;
  pageList[pageIndex].style.backgroundColor = "rgb(94, 86, 104)";
  pageList[prevPage].style.backgroundColor = "black";
  pageIndex = prevPage;
};
let timer = setInterval(() => {
  rightBtn.onclick();
}, 2000);
let banner = document.querySelector(".banner");
banner.onmouseenter = function () {
  clearTimeout(timer);
};
banner.onmouseleave = function () {
  timer = setInterval(() => {
    rightBtn.onclick();
  }, 2000);
};
